<html>
<head>
	<meta charset="utf-8">
	<!-- 标签页名称 -->
	<title>第八组实训作业</title>
	<!-- 引入 echarts.js -->
	<script src="/static/js/echarts.js"></script>
	<script src="/static/js/jquery-3.5.0.js"></script>
<!--	<script src="/static/echarts-wordcloud.min.js"></script>-->
</head>
<style>
	* {
		margin: 0px;
		padding: 0px;
		background-color: #fefae9;
		text-align: center;
		font-family: "Microsoft YaHei UI", serif;
	}

	.middle {
		width: 100%;
		margin: 5px auto;
	}
	.div1 {
		height: 380px;
		width: 30%;
		margin-left: 2.5%;
		margin-top: 5px;
		float: left;
		/* 调试边框颜色，修改透明度即可 */
		border: 1px solid rgba(255, 0, 0, 0);
	}
	.div2 {
		height: 500px;
		width: 95%;
		margin-left: 2.5%;
		margin-top: 20px;
		float: left;
		/* 调试边框颜色，修改透明度即可 */
		border: 1px solid rgba(255, 0, 0, 0);
	}
</style>

<body>
	<div class="middle">
<!--		{{cs1}}-->
<!--		{{cs2}}-->
<!--		{{cs4}}-->
		<div>
		<h1 style="color: dimgrey">第八组</h1>
		<h3 style="color: dimgrey">下学期实训期末项目</h3>
		<h3 style="color: #d3cbaf">小组成员</h3>
		<h3 style="color: #d3cbaf">孟祥润 李庶祎 丁一 秦晓宇 郝泳棋 张文雨</h3>
		</div>

		<!-- 1 -->
		<div class="div1" id="cs1">
			<script type="text/javascript">
				  // 基于准备好的dom，初始化echarts实例
        var chart1 = echarts.init(document.getElementById('cs1'));
        //指定图表的配置项和数据
        var cs1 = {
            title: {
                text: '院校数量',
				left: 'center' //题目居中
            },
            tooltip: {},
            xAxis: {
                data: {{ cs1name|safe }}
            },
            yAxis: {},
            series: [{
                name: '院校',
				color: ['#285c7e'],
                type: 'line',
                data: {{ cs1value|safe }}
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        chart1.setOption(cs1);
			</script>
		</div>
		<!-- 2 -->
		<div class="div1" id="cs2">
			<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
        var chart2 = echarts.init(document.getElementById('cs2'));
        // 指定图表的配置项和数据。
        var cs2 = {

            title: {
                text: '各院校考试科目',
				left: 'center' //题目居中
            },
            tooltip: {},
			legend: {
						top: '5%',
						left: 'center'
					},
            // xAxis: {
			// 	type: 'category',
			// 	axisLabel: { interval: 0, rotate: 0 },
            //     data: {{ cs3name|safe }}
            // },
            // yAxis: {},
            series: [
						{
							// name: '',
							type: 'pie',
							radius: ['40%', '70%'],
							avoidLabelOverlap: false,
							label: {
								show: false,
								position: 'center'
							},
							emphasis: {
								label: {
									show: true,
									fontSize: '40',
									fontWeight: 'bold'
								}
							},
							labelLine: {
								show: false
							},
							data: {{cs3|safe}}
						}
					]
        };
        // 使用刚指定的配置项和数据显示图表。
        chart2.setOption(cs2);
			</script>
		</div>
		<!-- 3 -->
		<div class="div1" id="cs3">
			<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
        var chart3 = echarts.init(document.getElementById('cs3'));
        // 指定图表的配置项和数据
        var cs3 = {
		title: {
                text: '985、211院校数量',
				left: 'center' //题目居中
            },
            tooltip: {},
            xAxis: {
                data: {{ cs2name|safe }}
            },
            yAxis: {},
            series: [{
                name: '院校',
                type: 'line',
				color: ['#3a66a2'],
                data: {{ cs2value|safe }}
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        chart3.setOption(cs3);
			</script>
		</div>
<!--		4-->
		<div class="div1" id="cs4">
			<script type="text/javascript">
        var chart4 = echarts.init(document.getElementById('cs4'));
        var cs4 = {
            title: {
                text: '专业课考试科目',
				left: 'center' //题目居中..
            },
            tooltip: {},
            series: [{
                			name: '科目',
               			 	type: 'pie',
							color: ['#549daf', '#4167ab'],
							data:{{cs4|safe}},
							emphasis:
									{
									itemStyle:
											{
												shadowBlur: 10,
												shadowOffsetX: 0,
												shadowColor: 'rgba(0, 0, 0, 0.5)'
											}
									}
								}]
		};
        //使用刚指定的配置项和数据显示图表。
        	chart4.setOption(cs4);
			</script>
		</div>
<!--		5-->
		<div class="div1" id="cs5">
			<script type="text/javascript">
			 var chart5 = echarts.init(document.getElementById('cs5'));
			 var cs5 = {
  title: {
    text: '考试科目和地点的关系',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {
	  left: 'right'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: {{cs51name|safe}}
  },
			 color: ['#54afaf', '#003a5e'],
  series: [
    {
      name: '数学一',
      type: 'bar',
      data: {{cs51data|safe}}

    },
    {
      name: '英语一',
      type: 'bar',
      data: {{cs52data|safe}}
    }
  ]
};
	chart5.setOption(cs5);
			</script>
		</div>
<!--		6-->
		<div class="div1" id="cs6">
			<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
        var chart6 = echarts.init(document.getElementById('cs6'));
        // 指定图表的配置项和数据
var cs6 = {
            title: {
                text: '不同院校拟招生人数',
				left: 'center' //题目居中..
            },
            tooltip: {},
            series: [{
                			name: '招生人数',
               			 	type: 'pie',
							color: ['#549daf','#4167ab', '#5387df'],
							data:{{cs6|safe}},
							emphasis:
									{
									itemStyle:
											{
												shadowBlur: 10,
												shadowOffsetX: 0,
												shadowColor: 'rgba(0, 0, 0, 0.5)'
											}
									}
								}]
		};
        // 使用刚指定的配置项和数据显示图表。
        chart6.setOption(cs6);
			</script>
		</div>
<!--		7-->
		<div class="div2" id="cs7">
			<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
        var chart7 = echarts.init(document.getElementById('cs7'));
        // 指定图表的配置项和数据
        var cs7 = {
            title: {
                text: '985、211主要研究方向',
				left: 'center', //题目居中
            },
            // tooltip: {},
            xAxis: {
				type: 'category',
				axisLabel: { interval: 3, rotate: 15 },
                data: {{ cs7name|safe }}
            },
            yAxis: {},
            series: [{
                name: '方向',
                type: 'bar',
				color: ['#457ea1'],
                data: {{ cs7value|safe }}
            }]
        };
        // 使用刚指定的配置项和数据显示图表
        chart7.setOption(cs7);
			</script>
		</div>
<!--&lt;!&ndash;		8挖掘&ndash;&gt;-->
<!--		<div class="div1" id="productcolor">-->
<!--			<script type="text/javascript">-->

<!--			</script>-->
<!--		</div>-->
<!--&lt;!&ndash;		9挖掘&ndash;&gt;-->
<!--		<div class="div1" id="replycount2">-->
<!--			<script type="text/javascript">-->

<!--			</script>-->
<!--		</div>-->
	</div>

</html>